<template>
  <div class="bg-white rounded-lg shadow-md p-8">
    <div class="grid grid-cols-3 gap-6">
      <router-link
        v-for="donor in userList"
        :key="donor.id"
        :to="`/donor/list/${donor.id}`"
        class="donor-card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-all duration-200"
      >
        <div class="aspect-[4/3] bg-gray-100 relative">
          <el-image
            :src="donor.image"
            class="w-full h-full object-cover object-top"
            fit="cover"
            :alt="`${donor.name}照片`"
          />
        </div>
        <div class="p-6">
          <h3 class="text-2xl font-semibold mb-4">
            {{ donor.name }}捐赠者档案
          </h3>
          <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-md mb-4">
            可用性：{{ donor.availability }}
          </div>
          <div class="flex gap-4 mb-6">
            <el-button
              type="text"
              class="flex items-center text-gray-600 hover:text-primary !rounded-button"
              @click.prevent="handlePhotoClick(donor.id)"
            >
              <el-icon class="mr-2"><Picture /></el-icon>
              {{ donor.photoCount }}张照片
            </el-button>
            <el-button
              type="text"
              class="flex items-center text-gray-600 hover:text-primary !rounded-button"
              @click.prevent="handleVideoClick(donor.id)"
            >
              <el-icon class="mr-2"><VideoCamera /></el-icon>
              视频
            </el-button>
          </div>

          <div class="grid grid-cols-2 gap-4 text-sm">
            <div v-for="(value, key) in donor.details" :key="key">
              <span class="text-gray-500">{{ key }}：</span>
              <span class="text-gray-900">{{ value }}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <div>
      <div class="navigation">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { listParents } from "@/api/business/expectant-parents";
import { useRouter } from "vue-router";
const router = useRouter();

// 用户列表数据
const userList = ref([]); // 确保模板中绑定的是 userList
// 加载状态
const loading = ref(true); // 确保模板中绑定了 v-loading="loading"
// 总条数
const total = ref(0); // 确保模板中绑定了 :total="total"

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  userName: undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined,
});

/** 查询用户列表 */
function getList() {
  loading.value = true;
  listParents(queryParams).then((res) => {
    loading.value = false;
    userList.value = res.rows; // 修正为 userList
    total.value = res.total;
  });
}
console.log("userLis***************************************************t")
console.log(userList)

/** 分页大小改变 */
function handleSizeChange(val) {
  queryParams.pageSize = val;
  getList();
}

/** 当前页码改变 */
function handleCurrentChange(val) {
  queryParams.pageNum = val;
  getList();
}

// 组件挂载时获取数据
onMounted(() => {
  getList();
});

const handlePhotoClick = (donorId: number) => {
  router.push({
    path: "/donor/list",
    query: {
      id: donorId,
      tab: "photos",
    },
  });
};

const handleVideoClick = (donorId: number) => {
  router.push({
    path: "/donor/list",
    query: {
      id: donorId,
      tab: "videos",
    },
  });
};
</script>

<style scoped>
.navigation {
  margin-top: 20px;
}
</style>
